<template>
		<view>
			<u-navbar title="地址列表" :autoBack="true" :bgColor="them_color" :titleStyle="{color:'#ffffff'}"
			leftIconColor="#ffffff"></u-navbar>
			<view :style="'margin-top:' + navH + 'px;'">
			<view class='address-management' :class='addressList.length < 1 && page > 1 ? "fff":""' >
				<view class='line'>
					<image :src="imgHost+'/statics/yilangmp/line.jpg'" v-if="addressList.length"></image>
				</view>
				<u-radio-group class="radio-group" @change="groupChange" v-if="addressList.length" v-model="defaultRadio" placement="column">
					<view class='item' v-for="(item,index) in addressList" :key="index">
						<view class='address' @click='goOrder(item.address_id)'>
							<view class='consignee'>收货人：{{item.consignee}}<text class='phone'>{{item.mobile}}</text></view>
							<view>收货地址：{{item.province_name}}{{item.city_name}}{{item.district_name}}{{item.address}}</view>
						</view>
						<view class='operation acea-row row-between-wrapper'>
							<!-- #ifndef MP -->
							<radio class="radio" :value="index.toString()" :checked="item.is_default ? true : false">
								<text>设为默认</text>
							</radio>
							<!-- #endif -->
							
							<u-radio :value="index" :name="index">
								<text>设为默认</text>
							</u-radio>
						
							<view class='acea-row row-middle'>
								<view @click='editAddress(item.address_id)'><text class='iconfont icon-bianji'></text>编辑</view>
								<view @click='delAddress(index)'><text class='iconfont icon-shanchu'></text>删除</view>
							</view>
						</view>
				
					</view>
				</u-radio-group>
				<view class='loadingicon acea-row row-center-wrapper' v-if="addressList.length">
					<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
				</view>
				<view class='noCommodity' v-if="addressList.length < 1 && page > 1">
					<view class='pictrue'>
						<image :src="imgHost + '/statics/images/noAddress.png'"></image>
					</view>
				</view>
				<view style='height:120rpx;'></view>
				<view class='footer acea-row row-between-wrapper'>
					<!-- #ifdef MP-->
					<view class='addressBnt wxbnt' @click='addAddress'><text
							class='iconfont icon-tianjiadizhi'></text>添加新地址</view>
					<view class='addressBnt' @click='getWxAddress'><text class='iconfont icon-weixin2'></text>导入微信地址
					</view>
					<!-- #endif -->
				</view>
			</view>
				
			</view>
	
		</view>
		
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import {
		address_list,
		address_edit_add,
		address_del
	} from '@/api/user.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import {BASE_URL} from '@/config/app'
	export default {
		data() {
			return {
				navH: '',
				them_color: getApp().globalData.theme_color,
				imgHost:BASE_URL,
				addressList: [],
				cartId: '',
				pinkId: 0,
				couponId: 0,
				loading: false,
				loadend: false,
				loadTitle: '加载更多',
				page: 1,
				limit: 20,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				news: '',
				defaultRadio:'',
				from:'',
				goods_number:'',
				goods_id:'',
				product_sn:''
			};
		},
		computed: mapGetters(['isLogin', 'app_token']),
		onLoad(options) {
			console.log(options)
			if(options){
				this.from = options.from;
				this.goods_id = options.goods_id;
				this.goods_number = options.goods_number;
				this.product_sn = options.product_sn;
			}
			this.navH = getApp().globalData.navHeight / 2;
			if (this.isLogin) {
				this.getAddressList(true);
			} else {
				toLogin();
			}
		},
		onShow: function() {
			let that = this;
			that.getAddressList(true);
		},
		methods: {
		
			onLoadFun: function() {
				this.getAddressList();
			},
			/*
			 * 导入微信地址（小程序）
			 */
			getWxAddress: function() {
				let that = this;
				uni.authorize({
					scope: 'scope.address',
					success: function(res) {
						uni.chooseAddress({
							success: function(res) {
								let addressP = {};
								addressP.province = res.provinceName;
								addressP.city = res.cityName;
								addressP.district = res.countyName;
								editAddress({
									address: addressP,
									is_default: 1,
									real_name: res.userName,
									post_code: res.postalCode,
									phone: res.telNumber,
									detail: res.detailInfo,
									id: 0,
									type: 1
								}).then(res => {
									that.$util.Tips({
										title: '添加成功',
										icon: 'success'
									}, function() {
										that.getAddressList(true);
									});
								}).catch(err => {
									return that.$util.Tips({
										title: err
									});
								});
							},
							fail: function(res) {
								if (res.errMsg == 'chooseAddress:cancel') return that.$util.Tips({
										title: '取消选择'
									});
							},
						})
					},
					fail: function(res) {
						uni.showModal({
							title: '您已拒绝导入微信地址权限',
							content: '是否进入权限管理，调整授权？',
							success(res) {
								if (res.confirm) {
									uni.openSetting({
										success: function(res) {}
									});
								} else if (res.cancel) {
									return that.$util.Tips({
										title: '已取消！'
									});
								}
							}
						})
					}
				})
			},
			/*
			 * 导入微信地址（公众号）
			 */
			getAddress() {
				let that = this;
				that.$wechat.openAddress().then(userInfo => {
					editAddress({
							real_name: userInfo.userName,
							phone: userInfo.telNumber,
							address: {
								province: userInfo.provinceName,
								city: userInfo.cityName,
								district: userInfo.countryName
							},
							detail: userInfo.detailInfo,
							post_code: userInfo.postalCode,
							is_default: 1,
							type: 1
						})
						.then(() => {
							that.$util.Tips({
								title: '添加成功',
								icon: 'success'
							}, function() {
								that.getAddressList(true);
							});
						})
						.catch(err => {
							// close();
							return that.$util.Tips({
								title: err || '添加失败'
							});
						});
				});
			},
			/**
			 * 获取地址列表
			 * 
			 */
			getAddressList: function(isPage) {
				let that = this;
				if (isPage) {
					that.loadend = false;
					that.page = 1;
					that.$set(that, 'addressList', []);
				};
				if (that.loading) return;
				if (that.loadend) return;
				that.loading = true;
				that.loadTitle = '';
				address_list({
					// page: that.page,
					// limit: that.limit
					app_token:that.app_token
				}).then(res => {
					console.log(res)
					let list = res.data;
					let loadend = list.length < that.limit;
					that.addressList = that.$util.SplitArray(list, that.addressList);
					// console.log(that.addressList)
					that.$set(that, 'addressList', that.addressList);
					for (let i = 0; i < that.addressList.length; i++) {
						if(that.addressList[i].is_default == 1){
							that.defaultRadio = i;
						}
					}
					
					that.loadend = loadend;
					that.loadTitle = loadend ? '我也是有底线的' : '加载更多';
					that.page = that.page + 1;
					that.loading = false;
				}).catch(err => {
					that.loading = false;
					that.loadTitle = '加载更多';
				});
			},
			/**
			 * 设置默认地址
			 */
		
			groupChange(e) {
				console.log(e)
				let index = parseInt(e),
					that = this;
				let address = this.addressList[index];
				if (address == undefined) return that.$util.Tips({
					title: '您设置的默认地址不存在!'
				});
				address.is_default = 1;
				address_edit_add({
					app_token:that.app_token,
					...address
				}).then(res => {
					// for (let i = 0, len = that.addressList.length; i < len; i++) {
					// 	if (i == index) that.addressList[i].is_default = true;
					// 	else that.addressList[i].is_default = false;
					// }
					that.$util.Tips({
						title: res.msg,
						icon: 'success'
					}, function() {
						that.$set(that, 'addressList', that.addressList);
					});
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				});
			},
			/**
			 * 编辑地址
			 */
			editAddress: function(id) {
				uni.navigateTo({
					url: '/pages/users/user_address/index?address_id=' + id
				})
			},
			/**
			 * 删除地址
			 */
			delAddress: function(index) {
				let that = this,
					address = this.addressList[index];
				if (address == undefined) return that.$util.Tips({
					title: '您删除的地址不存在!'
				});
				address_del({
					app_token:that.app_token,
					address_id:address.address_id
				}).then(res => {
					that.$util.Tips({
						title: res.msg,
						icon: 'success'
					}, function() {
						that.addressList.splice(index, 1);
						that.$set(that, 'addressList', that.addressList);
					});
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				});
			},
			/**
			 * 新增地址
			 */
			addAddress: function() {
				uni.navigateTo({
					url: '/pages/users/user_address/index'
				})
			},
			goOrder: function(id) {
				if (this.from == 'integral') {
					uni.redirectTo({
						url: '/pages/users/user_integral/order/index?is_address=1&rec_id=' + this.goods_id + '&number=' +
							this.goods_number + '&address_id=' + id 
					})
				}else if(this.from == 'order'){
					uni.redirectTo({
						url: '/pages/order/order_confirm/index?goods_id=' + this.goods_id + '&goods_number=' +
							this.goods_number + '&product_sn=' + this.product_sn 
					})
				}
			}
		},
		onReachBottom: function() {
			this.getAddressList();
		}
	}
</script>

<style scoped lang="scss">
	.address-management.fff {
		background-color: #fff;
		height: 1300rpx
	}

	.address-management .line {
		width: 100%;
		height: 3rpx;
	}
	
	.address-management .line image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.address-management .item {
		background-color: #fff;
		padding: 0 30rpx;
		margin-bottom: 12rpx;
	}

	.address-management .item .address {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eee;
		font-size: 28rpx;
		color: #282828;
	}

	.address-management .item .address .consignee {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 8rpx;
	}

	.address-management .item .address .consignee .phone {
		margin-left: 25rpx;
	}

	.address-management .item .operation {
		height: 83rpx;
		font-size: 28rpx;
		color: #282828;
	}

	.address-management .item .operation .radio text {
		margin-left: 13rpx;
	}

	.address-management .item .operation .iconfont {
		color: #2c2c2c;
		font-size: 35rpx;
		vertical-align: -2rpx;
		margin-right: 10rpx;
	}

	.address-management .item .operation .iconfont.icon-shanchu {
		margin-left: 40rpx;
		font-size: 38rpx;
	}

	.address-management .footer {
		position: fixed;
		width: 100%;
		background-color: #fff;
		bottom: 0;
		height: 106rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.address-management .footer .addressBnt {
		width: 330rpx;
		height: 76rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 76rpx;
		font-size: 30rpx;
		color: #fff;
		background-color: var(--view-theme);
	}

	.address-management .footer .addressBnt.on {
		width: 690rpx;
		margin: 0 auto;
	}

	.address-management .footer .addressBnt .iconfont {
		font-size: 35rpx;
		margin-right: 8rpx;
		vertical-align: -1rpx;
	}

	.address-management .footer .addressBnt.wxbnt {
		background-color: #FE960F;
	}
</style>



